<template>
    <el-select v-model="selectValue" placeholder="请选择" @change="handleChange">
        <div class="models-select">
            <el-option label="关闭" value="" />
        </div>
        <template v-for="item in modelsLists" :key="item.key">
            <div class="models-select">
                <h6 v-if="item.key !== 'browser'">{{ item.name }}</h6>
                <el-option
                    v-for="(name, key) in item.pronounces"
                    :key="key"
                    :label="name"
                    :value="item.key + ':' + key"
                >
                    <div class="flex items-center">
                        <span>{{ name }}</span>
                    </div>
                </el-option>
            </div>
        </template>
    </el-select>
</template>

<script lang="ts">
import useAppStore from '~~/stores/app'

export default defineComponent({
    name: 'Broadcast',
    props: {
        modelValue: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    emits: ['change', 'update:modelValue'],
    setup(props, { emit }) {
        const appStore = useAppStore()
        const selectLogo = ref<string>('')
        const selectValue = ref<string>('')
        const modelSelect = ref<AppAiModelsResponse>({} as AppAiModelsResponse)
        const modelsLists = ref(modelSelect.value?.broadcast_models)

        const handleChange = (val: any) => {
            let data: any = {}
            const marks: string = val.split(':')[0]
            const model: string = val.split(':')[1]
            for (let i = 0; i < modelsLists.value.length; i++) {
                const item: any = modelsLists.value[i]
                if (item.key === marks) {
                    for (const key in item.pronounces) {
                        if (key === model) {
                            data = {
                                model: val,
                                speed: item.speed,
                                speed_range: item.speed_range
                            }
                            break
                        }
                    }
                }
            }

            emit('update:modelValue', data)
            emit('change', {
                'model': data.model,
                'speed': data.speed,
                'speed_range': data.speed_range
            })
        }

        watch(() => props.modelValue,
            (value) => {
                selectValue.value = value?.model
            },
            { immediate: true }
        )

        onMounted(async () => {
            modelSelect.value = appStore.models
            modelsLists.value = modelSelect.value?.broadcast_models
        })

        return {
            selectLogo,
            selectValue,
            modelsLists,
            handleChange
        }
    }
})
</script>

<style scoped lang="scss">
.models-select {
    padding: 6px 0;
    border-bottom: 1px solid var(--el-bg-color-page);
    &:last-child {
        border-bottom: 0;
    }
    h6 {
        padding: 4px 0;
        margin-left: 20px;
        font-size: var( --el-font-size-sm);
        color: var(--el-text-color-placeholder);
    }
    .el-select-dropdown__item {
        margin: 0 5px;
        border-radius: 4px;
        &.is-hovering {
            background-color: var(--el-bg-color-page);
        }
    }
}
</style>
